/*
* @Author: Josh
* @Date:   2019-08-16 20:18:27
* @Last Modified by:   Administrator
* @Last Modified time: 2019-09-05 20:01:24
*/
/* 网格组件 */
.ju-grid {
    display   : flex;
    flex-wrap : wrap;
    border-top: 1px solid #ddd;
}


/* 网格中的格子 */
.ju-grid > .ju-grid-item {
    position     : relative;
    flex         : 1 1 33%;
    box-sizing   : border-box;
    padding      : 1.2rem 0;
    text-align   : center;
    border-right : 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background   : #fff;
}
/* 默认为三列 */
.ju-grid .ju-grid-item:nth-child(3n){
    border-right: none;
}


/* grid内容区 */
.ju-grid > .ju-grid-item > .ju-grid-icon {
    font-size    : 1.5rem;
    color        : #aaa;
    margin-bottom: .5rem;
}
.ju-grid > .ju-grid-item > .ju-grid-label {
    font-size: .6rem;
    color    : #333;
}


/* 两列网格 仅做宽度、内边距和边框的修改 */
.ju-grid.ju-grid-2 .ju-grid-item {
    border-right: 1px solid #ddd;
    flex-basis  : 50%;
    padding     : 1.8rem 0;
}
.ju-grid.ju-grid-2 .ju-grid-item:nth-child(2n) {
    border-right: none;
}
/* 四列网格 */
.ju-grid.ju-grid-4 .ju-grid-item {
    border-right: 1px solid #ddd;
    flex-basis  : 25%;
    padding     : .9rem 0;
}
.ju-grid.ju-grid-4 .ju-grid-item:nth-child(4n) {
    border-right: none;
}
/* 五列网格 */
.ju-grid.ju-grid-5 .ju-grid-item {
    border-right: 1px solid #ddd;
    flex-basis  : 20%;
    padding     : .6rem 0;
}
.ju-grid.ju-grid-5 .ju-grid-item:nth-child(5n) {
    border-right: none;
}



/* 取消边框 ！!需要置于n列网格样式之后 否则会因优先级被覆盖!! */
/*去除容器上边框*/
.ju-grid.no-border {
    border: none;
}
/*去除格子的右、下边框*/
.ju-grid.no-border > .ju-grid-item {
    border: none ;
}